<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>browse</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${base}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${base}/static/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="${base}/static/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${base}/static/css/responsive.css" />
</head>
<body>
<div class="main">
    <div class="browse-box">
        <div class="hd g-header">
            <div class="left">
                <div class="logo">
                    <a href="javascript:void(0);"><img src="${base}/static/images/logo.png" alt=""></a>
                </div>
            </div>
            <div class="right">
                <div class="component">
                    <div class="tabs">
                        <a class="active" href="javascript:void(0);">Parameters</a>
                        <a href="javascript:void(0);">Report</a>
                        <a href="javascript:void(0);">User</a>
                    </div>
                    <div class="user">
                        <ul>
                            <li>
                                <a href="javascript:void(0);"><img src="${base}/static/images/icon_03.png"></a>
                            </li>
                            <li>
                                <a class="user-button" href="javascript:void(0);"><img src="${base}/static/images/icon_04.png"><span>Admin</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="bd">
            <div class="sidebar">
                <div class="title">
                    Filters
                </div>
                <div class="serach-item">
                    <label>Client</label>
                    <div class="input-box">
                        <div id="select-client" class="xm-select-item"></div>
                    </div>
                </div>
                <div class="serach-item">
                    <label>Product Category</label>
                    <div class="input-box">
                        <div id="select-category" class="xm-select-item"></div>
                    </div>
                </div>
                <div class="filter-item">
                    <ul>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Photo Style</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>360 Degree</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>45 Degree Angle</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Invisible Mannequin</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Knolling</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Straight on</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Scene Style</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>360 Degree</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>45 Degree Angle</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Invisible Mannequin</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Knolling</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Straight on</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Lighting Style</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>360 Degree</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>45 Degree Angle</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Invisible Mannequin</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Knolling</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Straight on</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Lighting Style</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>360 Degree</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>45 Degree Angle</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Invisible Mannequin</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Knolling</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Straight on</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Background Style</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>360 Degree</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>45 Degree Angle</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Invisible Mannequin</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Knolling</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Straight on</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Props</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>360 Degree</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>45 Degree Angle</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Invisible Mannequin</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Knolling</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="" id="" value="" />
                                            <i></i>
                                            <span>Straight on</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="serach-item">
                    <label>Creator</label>
                    <div class="input-box">
                        <input type="text" name="" id="" value="" placeholder="Search creator name" />
                        <i class="icon"></i>
                    </div>
                </div>
                <div class="time-item">
                    <label>Create Date</label>
                    <div id="preview-sticky" class="input-box">
                        <input id="litepicker" autocomplete="off" placeholder="Jan dd - Jan mm,yyyy" />
                        <i></i>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="serch">
                    <div class="form">
                        <form class="form-wrap" action="">
                            <div class="input-box">
                                <button class="submit-button" type="button"></button>
                                <input type="text" name="" id="" value="" placeholder="Enter a keyword" />
                            </div>
                            <div class="buttons">
                                <button class="active" type="button">View</button>
                                <button type="button">Active</button>
                                <button type="button">Deleted</button>
                            </div>
                        </form>
                    </div>
                    <button class="create-button">Create</button>
                </div>
                <div class="product-list" id="product-list">

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>

<script src="${base}/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/js/main.js"></script>
<script src="${base}/static/js/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/bscroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/script.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/dist/js/halflife.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(function() {

        HF.showList("product-list","${base}/admin/parameters/content_list");

        // 页面滑动
        let scroll = new BScroll('.product-list', {
            scrollY: true,
            freeScroll: true,
            mouseWheel: true,
            probeType: 2,
            click: true
        })
        // 选中日期
        var picker = new Litepicker({
            element:document.getElementById('litepicker'),
            format:'D MMM, YYYY',
            lang:'en-US',
            numberOfMonths:1,
            numberOfColumns:1,
            showTooltip:true,
            zIndex: 9999,
            minDate: null,
            maxDate: null,
            minDays: null,
            maxDays: null,
            selectForward: !1,
            selectBackward: !1,
            splitView: !1,
            inlineMode: !1,
            singleMode: !1,
            autoApply: !0,
            allowRepick: !1,
            // showWeekNumbers: !1,
            showTooltip: !0,
            hotelMode: !1,
            disableWeekends: !1,
            scrollToDate: !0,
            mobileFriendly: !0,
            lockDaysFormat: "YYYY-MM-DD",
            lockDays: [],
            bookedDaysFormat: "YYYY-MM-DD",
            bookedDays: [],
            dropdowns: {
                minYear: 1990,
                maxYear: null,
                months: !1,
                years: !1
            },
            tooltipText: {
                one: "day",
                other: "days"
            },
            onShow: function() {
                console.log("onShow callback")
                $(".browse-box .bd .sidebar .filter-item li .childer").slideUp(300)
            },
            onHide: function() {
                console.log("onHide callback")
            },
            onSelect: function(e, t) {
                console.log("onSelect callback", e, t)
            },
            onError: function(e) {
                console.log("onError callback", e)
            },
            onChangeMonth: function(e, t) {
                console.log("onChangeMonth callback", e, t)
            },
            onChangeYear: function(e) {
                console.log("onChangeYear callback", e)
            }
        });




        // 手风琴
        $(".browse-box .sidebar .filter-item li > a").on("click", function() {
            $(this).toggleClass('open');
            $(this).parent().siblings().find('a').removeClass('open');
            $(this).parent().children('.childer').slideToggle().parent().siblings().children('.childer').slideUp();
        })


        // tabs
        $(".browse-box .content .hd .component .tabs a").on("click", function() {
            $(this).addClass("active").siblings().removeClass('active');
        })

        // 产品列表
        $(".browse-box .bd li").each(function() {
            var _this = $(this)
            var button = _this.find(".result");
            var select = _this.find(".select");
            button.on("click", function() {
                if ($(this).hasClass("open")) {
                    $(this).removeClass("open")
                    select.slideUp(300)
                } else {
                    $(".browse-box .bd li .result").find('').removeClass('open');
                    $(".browse-box .bd li .select").slideUp(300)
                    $(this).addClass("open")
                    select.slideDown(300)
                }
            })
        });

        $(document).on("click", function(e) {
            var target = $(e.target);
            if (target.closest(".browse-box .result").length == 0) {
                $(".browse-box .result").removeClass("open");
                $(".browse-box .bd li .select").slideUp(300)
            }
        });

        // 多选框
        var mySelect = xmSelect.render({
            el: '#select-client',
            language: 'en',
            filterable: true,
            tips: 'Search client name',
            data: [
                {name: 'Godiva', value: 1},
                {name: 'Abc Chocolate', value: 2},
                {name: 'Godiva', value: 3},
                {name: 'Godiva', value: 4},
            ]
        });
        var mySelect2 = xmSelect.render({
            el: '#select-category',
            language: 'en',
            tips: 'Search product category',
            filterable: true,
            data: [
                {name: 'Godiva', value: 1},
                {name: 'Abc Chocolate', value: 2},
                {name: 'Godiva', value: 3},
                {name: 'Godiva', value: 4},
            ]
        })
    })
</script>
</body>

</html>
